<template>
  <div>
    <h1>App</h1>

    <button id="btn1" @click="count++">{{ count }}</button>
    <button @click="msg = msg + '1'">{{ msg }}</button>
    <button @click="stop">停止 watchEffect</button>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";

const count = ref(0);
const msg = ref("hello");

// watch(count, (newVal, oldVal) => {
//   console.log("count 发生变化", newVal, oldVal);
// });

// watchEffect 是个函数，接收一个参数，这个参数是个函数，默认会执行一次
// 这个参数又能接收到一个函数，这个函数可以接收一个回调，传递的回调函数，会在下一次 watchEffect 走进来之前触发
// 返回值是个函数，可以用来停止监听
// const stop = watchEffect((clearUp) => {
//   console.log("watchEffect", count.value, msg.value);

//   function handle() {
//     console.log("1");
//   }

//   document.addEventListener("click", handle);

//   clearUp(() => {
//     console.log("清理");
//     document.removeEventListener("click", handle);
//   });
// });

// watchEffect 回调的执行时机，默认是 真实DOM 更新之前
//  可以通过给 watchEffect 传递第二个参数，flush: 'POST' 修改执行时机为真实DOM更新之后
watchEffect(
  () => {
    console.log(
      count.value,
      document.querySelector("#btn1") &&
        document.querySelector("#btn1").innerHTML
    );
  },
  {
    flush: "post", // 'pre'
  }
);
</script>
